<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>采购订单列表 - 采购管理</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
    />
    <script>
        tailwind.config = {
                    theme: {
                        extend: {
                            colors: {
                                primary: '#165DFF',
                                success: '#00B42A',
                                warning: '#FF7D00',
                                danger: '#F53F3F',
                                info: '#86909C',
                                light: '#F2F3F5',
                                dark: '#1D2129',
                                'primary-light': '#E8F3FF',
                                'success-light': '#E8FFF3',
                                'warning-light': '#FFF7E8',
                                'danger-light': '#FFE8E8',
                            },
                            fontFamily: {
                                inter: ['Inter', 'system-ui', 'sans-serif'],
                            },
                        }
                    }
                }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .table-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-hover {
                @apply transition-all duration-200 hover:shadow-md;
            }
            .status-badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">

<!-- 主内容区 -->
<main class="flex-1 container mx-auto px-4 py-6">
    <!-- 搜索和筛选区域 -->
    <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <div
                class="flex flex-col md:flex-row md:items-center justify-between mb-6"
        >
            <h2 class="text-lg font-semibold text-gray-800 mb-4 md:mb-0">
                订单搜索
            </h2>
            <button
                    id="createOrderBtn"
                    class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md flex items-center transition-all btn-hover"
            >
                <i class="fas fa-plus mr-2"> </i>
                新建订单
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="relative">
                <label
                        for="orderNo"
                        class="block text-sm font-medium text-gray-700 mb-1"
                >
                    订单编号
                </label>
                <div class="relative">
              <span
                      class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400"
              >
                <i class="fas fa-search"> </i>
              </span>
                    <input
                            type="text"
                            id="orderNo"
                            name="orderNo"
                            placeholder="请输入订单编号"
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                    />
                </div>
            </div>
            <div>
                <label
                        for="status"
                        class="block text-sm font-medium text-gray-700 mb-1"
                >
                    订单状态
                </label>
                <select
                        id="status"
                        name="status"
                        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors appearance-none bg-white"
                >
                    <option value>全部状态</option>
                    <option value="draft">草稿</option>
                    <option value="pending">待审核</option>
                    <option value="approved">已审核</option>
                    <option value="rejected">已驳回</option>
                    <option value="completed">已完成</option>
                    <option value="cancelled">已取消</option>
                </select>
            </div>
            <div>
                <label
                        for="supplier"
                        class="block text-sm font-medium text-gray-700 mb-1"
                >
                    供应商
                </label>
                <select
                        id="supplier"
                        name="supplier"
                        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors appearance-none bg-white"
                >
                    <option value>全部供应商</option>
                    <option value="1">华为技术有限公司</option>
                    <option value="2">阿里巴巴集团</option>
                    <option value="3">腾讯科技有限公司</option>
                    <option value="4">京东集团</option>
                    <option value="5">小米科技有限责任公司</option>
                </select>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    创建时间
                </label>
                <div class="flex space-x-3">
                    <div class="relative flex-1">
                <span
                        class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400"
                >
                  <i class="fas fa-calendar"> </i>
                </span>
                        <input
                                type="date"
                                id="startDate"
                                name="startDate"
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                        />
                    </div>
                    <span class="flex items-center text-gray-500"> 至 </span>
                    <div class="relative flex-1">
                <span
                        class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400"
                >
                  <i class="fas fa-calendar"> </i>
                </span>
                        <input
                                type="date"
                                id="endDate"
                                name="endDate"
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                        />
                    </div>
                </div>
            </div>
            <div>
                <!-- 在代码任意位置添加 -->
                <input
                        type="range"
                        id="amountRange"
                        class="hidden"
                        min="0"
                        max="10000"
                        step="100"
                >
                <label
                        for="amountRange"
                        class="block text-sm font-medium text-gray-700 mb-1"
                >
                    订单金额
                </label>
                <div class="flex space-x-3">
                    <div class="relative flex-1">
                <span
                        class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400"
                >
                  <i class="fas fa-yen-sign"> </i>
                </span>
                        <input
                                type="number"
                                id="minAmount"
                                name="minAmount"
                                placeholder="最小金额"
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                        />
                    </div>
                    <span class="flex items-center text-gray-500"> 至 </span>
                    <div class="relative flex-1">
                <span
                        class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400"
                >
                  <i class="fas fa-yen-sign"> </i>
                </span>
                        <input
                                type="number"
                                id="maxAmount"
                                name="maxAmount"
                                placeholder="最大金额"
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="flex justify-end space-x-3">
<!--            <button-->
<!--                    class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"-->
<!--            >-->
<!--                重置-->
<!--            </button>-->
            <button
                    class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors btn-hover"
            >
                <i class="fas fa-search mr-2"> </i>
                搜索
            </button>
        </div>
    </div>
    <!-- 订单列表表格 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                        订单编号
                    </th>
                    <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                        供应商
                    </th>
                    <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                        总金额
                    </th>
                    <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                        状态
                    </th>
                    <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                        创建时间
                    </th>
                    <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                        操作
                    </th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <!-- 草稿状态订单 -->
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            #PO202311001
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img
                                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/21c9528f7286df24d4fb9959433242f1.png"
                                    alt="华为技术有限公司"
                                    class="h-8 w-8 rounded-full object-cover mr-3"
                            />
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    华为技术有限公司
                                </div>
                                <div class="text-xs text-gray-500">
                                    huawei@supplier.com
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">¥125,600.00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                  <span class="status-badge bg-yellow-100 text-yellow-800">
                    草稿
                  </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        2023-11-15 09:23:45
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <button
                                    class="text-primary hover:text-primary/80 transition-colors"
                            >
                                <i class="fas fa-eye mr-1"> </i>
                                查看
                            </button>
                            <button
                                    class="text-blue-600 hover:text-blue-500 transition-colors"
                            >
                                <i class="fas fa-edit mr-1"> </i>
                                编辑
                            </button>
                            <button
                                    class="text-red-600 hover:text-red-500 transition-colors"
                            >
                                <i class="fas fa-trash-alt mr-1"> </i>
                                删除
                            </button>
                        </div>
                    </td>
                </tr>
                <!-- 待审核状态订单 -->
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            #PO202311002
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img
                                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/c27eb4ade322372860dd01ebb65beb3d.png"
                                    alt="阿里巴巴集团"
                                    class="h-8 w-8 rounded-full object-cover mr-3"
                            />
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    阿里巴巴集团
                                </div>
                                <div class="text-xs text-gray-500">
                                    alibaba@supplier.com
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">¥89,250.00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                  <span class="status-badge bg-blue-100 text-blue-800">
                    待审核
                  </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        2023-11-14 14:56:12
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <button
                                    class="text-primary hover:text-primary/80 transition-colors"
                            >
                                <i class="fas fa-eye mr-1"> </i>
                                查看
                            </button>
                        </div>
                    </td>
                </tr>
                <!-- 已审核状态订单 -->
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            #PO202311003
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img
                                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f27bd871885ae2977cef8c015faf4c3e.png"
                                    alt="腾讯科技有限公司"
                                    class="h-8 w-8 rounded-full object-cover mr-3"
                            />
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    腾讯科技有限公司
                                </div>
                                <div class="text-xs text-gray-500">
                                    tencent@supplier.com
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">¥56,800.00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                  <span class="status-badge bg-green-100 text-green-800">
                    已审核
                  </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        2023-11-12 10:15:33
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <button
                                    class="text-primary hover:text-primary/80 transition-colors"
                            >
                                <i class="fas fa-eye mr-1"> </i>
                                查看
                            </button>
                        </div>
                    </td>
                </tr>
                <!-- 已驳回状态订单 -->
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            #PO202311004
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img
                                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/ef1bd1d0bda0f00b7f0363fb97aa43e6.png"
                                    alt="京东集团"
                                    class="h-8 w-8 rounded-full object-cover mr-3"
                            />
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    京东集团
                                </div>
                                <div class="text-xs text-gray-500">jd@supplier.com</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">¥92,300.00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                  <span class="status-badge bg-red-100 text-red-800">
                    已驳回
                  </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        2023-11-10 16:42:18
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <button
                                    class="text-primary hover:text-primary/80 transition-colors"
                            >
                                <i class="fas fa-eye mr-1"> </i>
                                查看
                            </button>
                            <button
                                    class="text-blue-600 hover:text-blue-500 transition-colors"
                            >
                                <i class="fas fa-edit mr-1"> </i>
                                编辑
                            </button>
                            <button
                                    class="text-red-600 hover:text-red-500 transition-colors"
                            >
                                <i class="fas fa-trash-alt mr-1"> </i>
                                删除
                            </button>
                        </div>
                    </td>
                </tr>
                <!-- 已完成状态订单 -->
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            #PO202311005
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img
                                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/15dac13f6a1254b226072569f0198b4f.png"
                                    alt="小米科技有限责任公司"
                                    class="h-8 w-8 rounded-full object-cover mr-3"
                            />
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    小米科技有限责任公司
                                </div>
                                <div class="text-xs text-gray-500">
                                    xiaomi@supplier.com
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">¥78,500.00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                  <span class="status-badge bg-purple-100 text-purple-800">
                    已完成
                  </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        2023-11-08 14:22:55
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <button
                                    class="text-primary hover:text-primary/80 transition-colors"
                            >
                                <i class="fas fa-eye mr-1"> </i>
                                查看
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页区域 -->
        <div
                class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex flex-col md:flex-row items-center justify-between"
        >
            <div class="text-sm text-gray-700 mb-4 md:mb-0">
                显示
                <span class="font-medium"> 1 </span>
                到
                <span class="font-medium"> 5 </span>
                条，共
                <span class="font-medium"> 24 </span>
                条记录
            </div>
            <div class="flex items-center space-x-1">
                <button
                        class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                        disabled
                >
                    <i class="fas fa-chevron-left text-xs"> </i>
                </button>
                <button
                        class="px-3 py-1 rounded border border-primary bg-primary text-white"
                >
                    1
                </button>
                <button
                        class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                >
                    2
                </button>
                <button
                        class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                >
                    3
                </button>
                <button
                        class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                >
                    4
                </button>
                <button
                        class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                >
                    5
                </button>
                <button
                        class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"
                >
                    <i class="fas fa-chevron-right text-xs"> </i>
                </button>
            </div>
        </div>
    </div>
</main>
<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-4">
    <div class="container mx-auto px-4 text-center text-sm text-gray-500">
        <p>© 2023 采购管理系统. 保留所有权利.</p>
    </div>
</footer>
<!-- 删除确认模态框 -->
<div
        id="deleteModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
>
    <div
            class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all"
    >
        <div class="p-6">
            <div class="text-center mb-4">
                <div
                        class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-red-500 mb-4"
                >
                    <i class="fas fa-exclamation-triangle text-2xl"> </i>
                </div>
                <h3 class="text-lg font-medium text-gray-900">确认删除订单</h3>
                <p class="mt-2 text-sm text-gray-500">
                    您确定要删除此订单吗？此操作不可撤销。
                </p>
            </div>
            <div class="flex justify-center space-x-3 mt-6">
                <button
                        id="cancelDelete"
                        class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
                >
                    取消
                </button>
                <button
                        id="confirmDelete"
                        class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
                >
                    确认删除
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    // 页面加载时初始化
            document.addEventListener('DOMContentLoaded', () => {
                // 获取DOM元素
                const deleteButtons = document.querySelectorAll('button:has(.fa-trash-alt)');
                const deleteModal = document.getElementById('deleteModal');
                const cancelDelete = document.getElementById('cancelDelete');
                const confirmDelete = document.getElementById('confirmDelete');
                const createOrderBtn = document.getElementById('createOrderBtn');

                // 添加新建订单按钮点击事件
                createOrderBtn.addEventListener('click', () => {
                    window.location.href = 'order.html';
                });

                // 当前选中的订单ID
                let currentOrderId = null;

                // 打开删除模态框
                deleteButtons.forEach(button => {
                    button.addEventListener('click', (e) => {
                        // 获取当前订单ID（在实际应用中，这里应该从数据属性中获取）
                        const orderRow = e.target.closest('tr');
                        const orderNoElement = orderRow.querySelector('td:first-child .text-sm');
                        currentOrderId = orderNoElement.textContent.trim();

                        // 显示模态框
                        deleteModal.classList.remove('hidden');
                        document.body.style.overflow = 'hidden'; // 防止背景滚动
                    });
                });

                // 关闭删除模态框
                const closeModal = () => {
                    deleteModal.classList.add('hidden');
                    document.body.style.overflow = ''; // 恢复背景滚动
                    currentOrderId = null;
                };

                // 取消删除
                cancelDelete.addEventListener('click', closeModal);

                // 点击模态框外部关闭
                deleteModal.addEventListener('click', (e) => {
                    if (e.target === deleteModal) {
                        closeModal();
                    }
                });

                // 确认删除
                confirmDelete.addEventListener('click', () => {
                    if (currentOrderId) {
                        // 在实际应用中，这里应该发送删除请求到服务器
                        console.log(`删除订单: ${currentOrderId}`);

                        // 模拟删除成功，从表格中移除该行
                        const orderRows = document.querySelectorAll('tbody tr');
                        orderRows.forEach(row => {
                            const orderNoElement = row.querySelector('td:first-child .text-sm');
                            if (orderNoElement && orderNoElement.textContent.trim() === currentOrderId) {
                                // 添加淡出动画
                                row.classList.add('opacity-0', 'transition-opacity', 'duration-300');

                                // 动画结束后移除行
                                setTimeout(() => {
                                    row.remove();
                                }, 300);
                            }
                        });

                        // 关闭模态框
                        closeModal();

                        // 显示成功提示（在实际应用中，这里应该显示一个toast通知）
                        alert('订单删除成功！');
                    }
                });

                // 根据订单状态调整按钮显示
                function updateButtonVisibility() {
                    const rows = document.querySelectorAll('tbody tr');
                    rows.forEach(row => {
                        const statusElement = row.querySelector('td:nth-child(4) .status-badge');
                        const buttonsContainer = row.querySelector('td:nth-child(6) .flex');
                        
                        if (statusElement && buttonsContainer) {
                            const statusText = statusElement.textContent.trim();
                            
                            // 清空按钮容器
                            buttonsContainer.innerHTML = '';
                            
                            // 添加查看按钮（所有状态都有）
                            const viewButton = document.createElement('button');
                            viewButton.className = 'text-primary hover:text-primary/80 transition-colors';
                            viewButton.innerHTML = '<i class="fas fa-eye mr-1"></i>查看';
                            buttonsContainer.appendChild(viewButton);
                            
                            // 根据状态添加其他按钮
                            if (statusText === '草稿' || statusText === '已驳回') {
                                // 添加编辑按钮
                                const editButton = document.createElement('button');
                                editButton.className = 'text-blue-600 hover:text-blue-500 transition-colors';
                                editButton.innerHTML = '<i class="fas fa-edit mr-1"></i>编辑';
                                buttonsContainer.appendChild(editButton);
                                
                                // 添加删除按钮
                                const deleteButton = document.createElement('button');
                                deleteButton.className = 'text-red-600 hover:text-red-500 transition-colors';
                                deleteButton.innerHTML = '<i class="fas fa-trash-alt mr-1"></i>删除';
                                buttonsContainer.appendChild(deleteButton);
                            }
                        }
                    });
                }

                // 为所有查看按钮添加点击事件
                function bindViewButtons() {
                    const viewButtons = document.querySelectorAll('button:has(.fa-eye)');
                    viewButtons.forEach(button => {
                        button.addEventListener('click', (e) => {
                            const orderRow = e.target.closest('tr');
                            const orderNoElement = orderRow.querySelector('td:first-child .text-sm');
                            const orderId = orderNoElement.textContent.trim();

                            // 在实际应用中，这里应该跳转到订单详情页
                            console.log(`查看订单: ${orderId}`);
                            alert(`查看订单: ${orderId}`);
                            window.location.href = '../Preview/orderView.html';
                        });
                    });
                }

                // 为所有编辑按钮添加点击事件
                function bindEditButtons() {
                    const editButtons = document.querySelectorAll('button:has(.fa-edit)');
                    editButtons.forEach(button => {
                        button.addEventListener('click', (e) => {
                            const orderRow = e.target.closest('tr');
                            const orderNoElement = orderRow.querySelector('td:first-child .text-sm');
                            const orderId = orderNoElement.textContent.trim();

                            // 在实际应用中，这里应该跳转到订单编辑页
                            console.log(`编辑订单: ${orderId}`);
                            alert(`编辑订单: ${orderId}`);
                            window.location.href = '../Preview/orderpreview.html';
                        });
                    });
                }

                // 为所有删除按钮添加点击事件
                function bindDeleteButtons() {
                    const deleteButtons = document.querySelectorAll('button:has(.fa-trash-alt)');
                    deleteButtons.forEach(button => {
                        button.addEventListener('click', (e) => {
                            // 获取当前订单ID（在实际应用中，这里应该从数据属性中获取）
                            const orderRow = e.target.closest('tr');
                            const orderNoElement = orderRow.querySelector('td:first-child .text-sm');
                            currentOrderId = orderNoElement.textContent.trim();

                            // 显示模态框
                            deleteModal.classList.remove('hidden');
                            document.body.style.overflow = 'hidden'; // 防止背景滚动
                        });
                    });
                }

                // 初始化按钮显示和事件绑定
                updateButtonVisibility();
                bindViewButtons();
                bindEditButtons();
                bindDeleteButtons();

                // 为所有状态筛选下拉框添加样式修复（移除默认箭头）
                const selects = document.querySelectorAll('select');
                selects.forEach(select => {
                    // 添加自定义箭头
                    const parentDiv = select.parentElement;
                    parentDiv.classList.add('relative');

                    // 创建自定义箭头元素
                    const arrow = document.createElement('div');
                    arrow.className = 'absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none';
                    arrow.innerHTML = `

    <i class="fas fa-chevron-down text-xs text-gray-400">
    </i>

    `;
                    parentDiv.appendChild(arrow);
                });
            });
</script>
</body>
</html>
